<!-- 硬件设备查询记录 -->
<template>
  <div>
    <div v-if="!modal.show">
      <div style="padding:20px 20px 20px;background-color:white;">
        <a-form layout="inline" class="nmv-search-form-auto" :labelCol="{ style: 'width: 75px' }">
          <a-form-item label="车牌号">
            <a-input v-model="grid.queryParams.vehiclePlate" class="nmv-w-200" placeholder="请输入车牌号"></a-input>
          </a-form-item>
          <a-form-item label="查询用户">
            <a-input v-model="grid.queryParams.queryUser" class="nmv-w-200" placeholder="请输入查询用户"></a-input>
          </a-form-item>
          <a-form-item label="设备号">
            <a-input v-model="grid.queryParams.deviceNo" class="nmv-w-200" placeholder="请输入设备号"></a-input>
          </a-form-item>

          <a-form-item label="所属企业">
            <a-select v-model="grid.queryParams.companyId" @change="searchQuery" placeholder="请选择企业" allowClear show-search
              :filter-option="filterOption" class="nmv-w-200">
              <a-select-option v-for="(item, i) in companiesAllListFilter" :key="i" :value="+item.id">{{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item label="所属门店">
            <a-select placeholder="全部门店" allowClear show-search :filter-option="filterOption" class="nmv-w-200"
              v-model="grid.queryParams.storeId" @change="searchQuery">
              <a-select-option v-for="item in storeList" :key="item.id" :value="+item.id">{{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item>
            <a-button type="primary" @click="searchQuery">查询</a-button>
            <a-button style="margin-left:12px" @click="onReset">重置</a-button>
          </a-form-item>

        </a-form>
        <a-table :loading="grid.load" :pagination="false" rowKey="id" :locale="locale"
          :columns="grid.columns" :data-source="grid.data" :scroll="{ x: 1300 }">
        </a-table>
        <div v-show="grid.total !== 0" style="text-align:right;">
          <a-pagination show-size-changer :current="grid.queryParams.pageNum" :pageSize="grid.queryParams.pageSize"
            @change="onChange" style="margin-top:20px;" size="small" @showSizeChange="onShowSizeChange"
            :total="grid.total" :show-total="total => `共${grid.total}条 `" />
        </div>
      </div>
    </div>
    <imgPreviewList v-model="previewList.show" :imgList="previewList.list" :index="previewList.index" />
  </div>
</template>

<script>
import Empty from '@/components/Empty/Empty'
import { hardwareDeviceSearchLog } from '@/services/car'
import {
  getAllStore,
  companiesAllList,
  agentList
} from '@/services/rider'
// import permissions from '@/components/permissions'
import imgPreviewList from '@/components/img-preview-list'
export default {
  components: { imgPreviewList },
  data () {
    return {
      companiesAllListFilter: [],
      agentList: [],
      locale: {
        emptyText: <Empty />
      },
      grid: {
        load: false,
        total: 0,
        queryParams: {
          pageNum: 1,
          pageSize: 10
        },
        columns: [
          {
            title: '车牌号',
            dataIndex: 'vehiclePlate',
            key: 'vehiclePlate',
            width: 130,
            ellipsis: true,
            customRender: (text) => text || '-'
          },
          {
            title: '设备号',
            dataIndex: 'deviceNo',
            key: 'deviceNo',
            width: 130,
            ellipsis: true,
            customRender: (text) => text || '-'
          },
          {
            title: '图片',
            key: 'imageUrl',
            dataIndex: 'imageUrl',
            width: 120,
            customRender: (text) => <div>{
              text ? <img onClick={() => this.previewImgList([{ url: text }], 0)} style="width:32px;height:32px" src={text} />
                : '-'
            }</div>
          },
          {
            title: '所属企业/门店',
            dataIndex: 'companyName',
            key: 'companyName',
            width: 210,
            customRender: (text, record) =>
              <div style="display:flex;flex-direction:column;">
                <p style="font-size:14px;margin-bottom:5px;">{record.companyName || '-'}</p>
                <p style="font-size:12px;margin:0;color:#999999">{record.storeName || '-'}</p>
              </div>
          },
          {
            title: '查询用户',
            dataIndex: 'queryUser',
            key: 'queryUser',
            width: 190,
            ellipsis: true,
            customRender: (text) => text || '-'
          },
          {
            title: '查询时间',
            dataIndex: 'queryTime',
            key: 'queryTime',
            width: 180,
            ellipsis: true,
            customRender: (text) => text || '-'
          },
          {
            title: '查询结果',
            dataIndex: 'queryResult',
            key: 'queryResult',
            width: 140,
            customRender: (text, record) => text === 2
              ? <div style="display:flex;align-items:center"><span style="background:red;width:10px;height:10px;border-radius:50%;margin-right:8px" ></span> 异常</div>
              : text === 1 ? <div style="display:flex;align-items:center"><span style="background:green;width:10px;height:10px;border-radius:50%;margin-right:8px"></span> 正常</div> : '-'
          }
        ],
        data: []
      },
      modal: {
        show: false
      },
      storeList: [],
      previewList: {
        show: false,
        list: []
      }
    }
  },
  created () {
    this.getHardwareDevice()
    this.parentCompanyIdGet()
    this.getCompaniesAllList()
  },
  methods: {
    previewImgList (e, index) {
      const arr = []
      e.forEach((ele) => {
        arr.push(ele.url)
      })
      this.previewList.list = arr
      this.previewList.index = index
      this.previewList.show = true
    },
    async getCompaniesAllList () {
      const res = await companiesAllList()
      const { isSuccess, data: response, msg } = res
      if (isSuccess) {
        this.companiesAllListFilter = response
      } else {
        this.$message.newFun(msg, 'error', 2)
      }
    },
    onChange (page, pageSize) {
      this.grid.queryParams.pageNum = page
      console.log(pageSize)
      this.searchQuery()
    },
    onShowSizeChange (current, pageSize) {
      this.grid.queryParams.pageSize = pageSize
      this.grid.queryParams.pageNum = 1
      console.log(current)
      this.searchQuery()
    },
    async getHardwareDevice () {
      this.grid.load = true
      const res = await hardwareDeviceSearchLog(this.grid.queryParams)
      if (res.code === 200) {
        this.grid.data = res.data.records
        this.grid.total = res.data.total
        this.grid.load = false
      } else {
        this.grid.load = false
      }
    },
    searchQuery (type) {
      if (type) {
        this.grid.queryParams.pageNum = 1
        this.grid.queryParams.pageSize = 10
      }
      this.getHardwareDevice()
    },
    onReset () {
      this.grid.queryParams = {
        pageNum: 1,
        pageSize: 10
      }
      this.getHardwareDevice()
    },
    filterOption (input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      )
    },
    parentCompanyIdGet () {
      getAllStore().then((res) => {
        const { isSuccess, data: response, msg } = res
        if (isSuccess) {
          this.storeList = response
        } else {
          this.$message.newFun(msg, 'error', 2)
        }
      }).catch((err) => {
        console.log(err)
      })
    }
  }
}
</script>

<style >
.ant-popover-inner {
  width: 230px !important;
}
</style>
